<template>
  <div>
    <!-- title -->
    <h2>用户管理</h2>

    <Divider />

    <div class="button-container margin-bottom-8">
      <Button type="primary" icon="md-refresh"
              @click="initData">刷新</Button>
      <Button v-if="hasPermissionEdit"
              type="primary" icon="md-add"
              @click="openCreateModal">添加</Button>
    </div>

    <Table stripe
           :columns="table.columns"
           :data="table.data"
           :loading="table.loading">
      <template slot-scope="{ row }" slot="jobStatus">
        <Tag :color="row.jobStatus === 'NORMAL' ? 'blue' : 'red'">
          {{ row.jobStatus === 'NORMAL' ? '正常' : '暂停' }}
        </Tag>
      </template>

      <template slot="action" slot-scope="{ row }">
        <div class="button-container">
          <Button v-if="hasPermissionEdit"
                  type="primary" size="small"
                  @click="openUpdateModal(row)">编辑</Button>
          <Button v-if="hasPermissionDisabled"
                  :type="row.jobStatus === 'NORMAL' ? 'error' : 'primary'"
                  size="small"
                  @click="updateDisabled(row)">
            {{ row.jobStatus === 'NORMAL' ? '暂停' : '启用' }}
          </Button>
          <Button v-if="hasPermissionDelete"
                  type="error" size="small"
                  @click="delJob(row)">删除</Button>
        </div>
      </template>
    </Table>

    <Create ref="createModal" @success="initData"></Create>
    <Update ref="updateModal" @success="initData"></Update>
  </div>
</template>

<script>
import Create from './components/create.vue';
import Update from './components/update.vue';

import { getJobs, pauseJob, resumeJob, deleteJob } from '../../../apis/system/quartz';

export default {
  name: 'index',
  components: {
    Create,
    Update
  },
  data() {
    const columns = [
      {
        title: '组名',
        key: 'jobGroupName'
      },
      {
        title: '类名',
        key: 'jobClassName'
      },
      {
        title: '表达式',
        key: 'cronExpression'
      },
      {
        title: '状态',
        slot: 'jobStatus'
      }
    ];

    if (this.$permission.hasPermissions(['system:task:edit', 'system:task:status', 'system:task:delete'])) {
      columns.push({
        title: '操作',
        slot: 'action',
        width: 200
      });
    }

    return {
      table: {
        columns,
        data: [],
        loading: false
      }
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.initData();
    },
    initData() {
      this.table.loading = true;

      getJobs((responseData) => {
        this.table.loading = false;

        this.table.data = responseData;
      }, () => {
        this.table.loading = false;
      });
    },
    openCreateModal() {
      this.$refs.createModal.openModal();
    },
    openUpdateModal(row) {
      this.$refs.updateModal.openModal(row);
    },
    updateDisabled(row) {
      const message = row.jobStatus === 'NORMAL' ? '暂停' : '启用';
      this.$Modal.confirm({
        title: '提示',
        content: `此操作将${message}该任务，是否继续？`,
        loading: true,
        onOk: () => {
          if (row.jobStatus === 'NORMAL') {
            this.pause(row, message);
          } else {
            this.resume(row, message);
          }
        }
      });
    },
    pause(row, message) {
      pauseJob({
        jobGroupName: row.jobGroupName,
        jobClassName: row.jobClassName
      }, () => {
        this.$Modal.remove();
        this.$Message.success(`${message}成功`);
        this.initData();
      })
    },
    resume(row, message) {
      resumeJob({
        jobGroupName: row.jobGroupName,
        jobClassName: row.jobClassName
      }, () => {
        this.$Modal.remove();
        this.$Message.success(`${message}成功`);
        this.initData();
      });
    },
    delJob(row) {
      this.$Modal.confirm({
        title: '提示',
        content: '此操作将永久删除该数据，是否继续？',
        loading: true,
        onOk: () => {
          deleteJob({
            jobGroupName: row.jobGroupName,
            jobClassName: row.jobClassName
          }, () => {
            this.$Modal.remove();
            this.$Message.success('删除成功');
            this.initData();
          });
        }
      });
    }
  },
  computed: {
    hasPermissionEdit() {
      return this.$permission.hasPermissions(['system:task:edit']);
    },
    hasPermissionDisabled() {
      return this.$permission.hasPermissions(['system:task:status']);
    },
    hasPermissionDelete() {
      return this.$permission.hasPermissions(['system:task:delete']);
    },
  }
};
</script>

<style scoped>

</style>
